<template>
  <div class="research">
    <el-container>
      <el-aside width="20%">
        <el-menu>
          <el-scrollbar height="100%;">
            <el-menu-item v-for="(item, index) in nav" :key="index">
              <span>{{ item }}</span>
            </el-menu-item>
          </el-scrollbar>
        </el-menu>
      </el-aside>
      <el-main>
        <el-card class="card">
          <el-scrollbar height="100%;">
            <h2 style="margin-left: 32px">矮柳</h2>
            <p>
              &nbsp;&nbsp;&nbsp;它的身高仅有3厘米～5厘米。与世界之最的杏仁桉比起来，一高一矮相关达1.5万倍。矮柳之矮，让人叹为观止。这种植物的茎一般匍匐在地面上，发芽抽枝后可以长出像杨柳一样的花序，然而虽同称为柳，但高矮实在差得太多。矮柳之所以矮，主要是受制于恶劣气候环境，矮柳生长在高山地带，那里的温度极低，空气稀薄，大风强劲，阳光直射，植株的身材必须矮小，才能适应这种环境。
            </p>
          </el-scrollbar>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'Research',
  data () {
    return {
      nav: [
        "最矮的树",
        "最能储水的植物",
        "最强吸水能力的植物",
        "最轻的树木",
        "最毒的植物",
        "最粗的植物",
        "最长寿的树",
        "最耐干旱的植物",
        "最长的植物",
        "最高的植物"
      ]
    }
  }
}
</script>
<style scoped>
.research {
  height: 100%;
  overflow: hidden;
}
.el-container {
  height: 100%;
}
.el-menu {
  height: 100%;
  border: 1px solid #dedfe0;
}
.card {
  /** */
  /* height:85%; */
  height: calc(88% - 2px);
}
.el-card >>> .el-card__body {
  padding: 2px;
  height: 100%;
  font-size: 18px;
  font-family: "Courier New", Courier, monospace;
}

.el-aside {
  height: 83%;
  overflow: hidden;
  margin-top: 20px;
}
.el-menu-item {
  height: 35px;
  color: rgb(102, 153, 52);
}
.el-menu-item:nth-child(1) {
  background: rgb(240, 249, 235);
}
</style>